<template>
    <div class="index">

        <Header></Header>
            <el-main>
                <div id="content">
                    <div id="flash">
                        <el-carousel indicator-position="outside" height="100vh">
                            <el-carousel-item v-for="(item,index) in flash" :key="index">
                                <img :src="item"/>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div id="movie">

                        <div class="item item1" style="float: left;" @click="go">
                            <div class="diamond" style=" left: 0;">
                                <div style="background-color: black;width: 80px;height: 20px;margin-top: 40px;margin-left: 50px;padding: 5px;text-align: center">
                                    <label style="color: white"> 影展数据</label>
                                </div>
                                <br/>
                                <label style="margin-left: 50px">2020-12-09</label>
                                <h2 style="margin-left: 50px">影展数据总结</h2>
                                <div style=" width:200px; margin-top : 70px; color : #987cb9; size: 3px;">
                                </div>
                            </div>
                        </div>
                        <div class="item2 item" style="float: right; " @click="go">
                            <div class="diamond" style=" right: 0;bottom: 0;background-color: black;color: white">
                                <div style="background-color: white;width: 80px;height: 20px;margin-top: 40px;margin-left: 50px;padding: 5px;text-align: center">
                                    <label style="color: black">影展数据</label>
                                </div>
                                <br/>
                                <label style="margin-left: 50px">2020-12-09</label>
                                <h2 style="margin-left: 50px">影展数据总结</h2>
                                <div style=" width:200px; margin-top : 70px; color : #987cb9; size: 3px;">
                                </div>
                            </div>
                        </div>
                        <div class="item item3" style="float: left;" @click="go">
                            <div class="diamond" style=" left: 0;">
                                <div style="background-color: black;width: 80px;height: 20px;margin-top: 40px;margin-left: 50px;padding: 5px;text-align: center">
                                    <label style="color: white"> 影展数据</label>
                                </div>
                                <br/>
                                <label style="margin-left: 50px">2020-12-09</label>
                                <h2 style="margin-left: 50px">影展数据总结</h2>
                                <div style=" width:200px; margin-top : 70px; color : #987cb9; size: 3px;">
                                </div>
                            </div>
                        </div>
                        <div class="item item4" style="float: right; " @click="go">
                            <div class="diamond" style=" right: 0;bottom: 0;background-color: black;color: white">
                                <div style="background-color: white;width: 80px;height: 20px;margin-top: 40px;margin-left: 50px;padding: 5px;text-align: center">
                                    <label style="color: black">影展数据</label>
                                </div>
                                <br/>
                                <label style="margin-left: 50px">2020-12-09</label>
                                <h2 style="margin-left: 50px">影展数据总结</h2>
                                <div style=" width:200px; margin-top : 70px; color : #987cb9; size: 3px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <my-video></my-video>
            </el-main>
            <Footer></Footer>
    </div>
</template>

<script>
    import Footer from "../components/Footer";
    import Header from "../components/Header";
    import MyVideo from "../components/MyVideo";
    import {findAllCarouselApi} from "../api";

    export default {
        name: "Index.vue",
        data(){
            return{
                flash:[],

            }
        },
        components:{
          Footer,Header,MyVideo
        },
        methods:{
            init(){
                findAllCarouselApi().then(res=>{
                    if(res.data){
                        res = res.data
                        for(let i = 0;i < res.length;i++){
                            this.flash.push(res[i].url)
                        }
                    }
                })
            },
            go(){
                    this.$router.push({
                      name:'Article',
                        query:{
                          title:"类型动画短片特别放映｜在深夜，我们翻转现实",
                          context:"<p>每个城市的白天与黑夜都显现不同的样貌，一套公式，一种修辞，都不足以形容一个地域与一种文化的关系。每一处发生事件的地点，都是一个内容场景，某种隐藏的魅力悄然释放，与深入其中的人产生关联。</p>\n" +
                              "<p>当白日安逸、舒适、古朴的成都混入夜幕，与科幻世界之间似乎存在着某种无法言说的引力。我们试探着，在深夜，策划一场视觉狂想。</p>\n" +
                              "<p>9月22日，惊喜影展将于IFS UA国际影城带来一场类型动画短片特别放映，用七个小巧的故事，打开浩瀚无垠的想象力空间，将现实翻转，释放蛰伏在暗夜中的想象力，让一个看不见的城市显影。加入我们，一起探索无人抵达的科幻世界，在不可思议的幻想宇宙中漫游。</p>\n" +
                              "<p class=\"has-text-align-center\">&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">《记忆管理局》</p>\n" +
                              "<p class=\"has-text-align-center\">刘文钰、李书宇</p>\n" +
                              "<p class=\"has-text-align-center\">&nbsp;9月22日 22:00</p>\n" +
                              "<p class=\"has-text-align-center\">IFS UA国际影城2号厅</p>\n" +
                              "<p class=\"has-text-align-center\"><img src=\"https://cdn.firstfilm.org.cn/wp-content/uploads/2021/09/IMG_4569.jpg\" alt=\"\" /></p>\n" +
                              "<p class=\"has-text-align-center\">《记忆管理局》讲述了男主无法接受朋友石严去世这个现实 便将记忆中的石严以Bug人的形式实体化。这被记忆管理局观测到，便引来了记忆回收员方糖和百重要将其回收，从而发生了一场难以预计的混战的故事。</p>\n" +
                              "<p class=\"has-text-align-center\">&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">《黑盒》</p>\n" +
                              "<p class=\"has-text-align-center\">李书宇</p>\n" +
                              "<p class=\"has-text-align-center\">&nbsp;9月22日 22:00&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">IFS UA国际影城2号厅</p>\n" +
                              "<p class=\"has-text-align-center\"><img src=\"https://cdn.firstfilm.org.cn/wp-content/uploads/2021/09/IMG_4570.jpg\" alt=\"\" /></p>\n" +
                              "<p class=\"has-text-align-center\">我常对她的背影陷入幻想中。她是什么样的人？喜欢做什么？拥有何种世界观？并从平时细枝末节的观察中兀自推断出许多莫须有的线索&hellip;&hellip; 在一系列的畅想后，&nbsp;<strong>《黑盒》</strong>中的我突然发现在脑内与自己对话的她其实只是自己一厢情愿的想象罢了。由此，当重逢的某日，我决定踏出这一步&hellip;&hellip;</p>\n" +
                              "<p class=\"has-text-align-center\">&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">《莫比乌斯环》</p>\n" +
                              "<p class=\"has-text-align-center\">刘文钰、李书宇</p>\n" +
                              "<p class=\"has-text-align-center\">9月22日 22:00&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">IFS UA国际影城2号厅</p>\n" +
                              "<p class=\"has-text-align-center\"><img src=\"https://cdn.firstfilm.org.cn/wp-content/uploads/2021/09/IMG_4571.jpg\" alt=\"\" /></p>\n" +
                              "<p>《莫比乌斯环》讲述了少女在意识到自己被束缚于象征着墨守成规的无限循环时间走廊中后，奋力奔逃，试图打破种种禁锢去追求不同的未来的故事。</p>\n" +
                              "<p>&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">《天启日》</p>\n" +
                              "<p class=\"has-text-align-center\">墨色</p>\n" +
                              "<p class=\"has-text-align-center\">9月22日 22:00&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">IFS UA国际影城2号厅</p>\n" +
                              "<p class=\"has-text-align-center\"><img src=\"https://cdn.firstfilm.org.cn/wp-content/uploads/2021/09/IMG_4572.jpg\" alt=\"\" /></p>\n" +
                              "<p class=\"has-text-align-center\">《天启日》讲述了主人公柏玖在反抗军同伴的帮助下成功进入巨型企业黑巢科技，试图获取&ldquo;检测仪&rdquo;，找回大家的身世与家庭的故事。</p>\n" +
                              "<p class=\"has-text-align-center\">&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">《水源》</p>\n" +
                              "<p class=\"has-text-align-center\">刘子涵</p>\n" +
                              "<p class=\"has-text-align-center\">9月22日 22:00&nbsp;</p>\n" +
                              "<p class=\"has-text-align-center\">IFS UA国际影城2号厅</p>\n" +
                              "<p class=\"has-text-align-center\"><img src=\"https://cdn.firstfilm.org.cn/wp-content/uploads/2021/09/IMG_4573.jpg\" alt=\"\" /></p>\n" +
                              "<p class=\"has-text-align-center\">《水源》讲述了两个水精灵在下雨天误入民宅，展开冒险的故事。</p>\n" +
                              "<p class=\"has-text-align-center\">&nbsp;</p>\n" +
                              "<p>参与方式：于影片开场前30分钟自UA国际影城2号厅外排队入场，坐满为止。我们期待那么一种作品，将现实表层的贫瘠剥落，露出背后深不可测的另一面。在影像的世界里，代表乏味的大厦等待被推倒，天马行空的想象力具有肆意狂放的空间，哲思与幻想也能缠绕成一个蔚为壮丽的景观。</p>\n" +
                              "<p>9月22日，在成都，在黑夜降临之时，我们一起脱离既定的轨道，抹去现实的边界，让想象力跟随影像生长。</p>"}
                    })
            }
        },
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>

    .item1{
        background-image: url("https://cdn.firstfilm.org.cn/wp-content/uploads/fly-images/32162/4m-scaled-e1608017090446-500x500-c.jpg");
    }
    .item2{
        background-image: url("https://cdn.firstfilm.org.cn/wp-content/uploads/fly-images/31093/image-81-e1597240890973-500x500-c.png");
    }
    .item3{
        background-image: url("https://cdn.firstfilm.org.cn/wp-content/uploads/fly-images/45279/WechatIMG621-scaled-1920x800-c.jpeg");
    }
    .item4{
        background-image: url("https://cdn.firstfilm.org.cn/wp-content/uploads/fly-images/44836/GOD-OF-COOKERY2-1920x800-c.png");
    }
    .item{
        background-size: cover;
        width: 50%;
        height: 600px;
        -webkit-filter: grayscale(100%);
    }
    .diamond{
        position: absolute;
        background-color: white;
        width: 50%;
        height: 50%;
    }
    .item:hover{
        -webkit-filter: grayscale(0%);
    }
    #content{
        position: relative;
        overflow: hidden;
    }
    /*响应式，最大距离768,*/
    @media screen and (max-device-width: 768px){
        .diamond{
            font-size: 10px;
        }

    }


</style>
